React Navigationの型付け

めちゃくちゃスケールさせづらい

定義と、修正の影響範囲がでかい

nestが深くなると少し複雑になる

参考

末端のcomponentでのuseNavigationに対しての型付

末端のComponentは複数のnavigatorの配下に存在することがあるが、どう扱うのか

navigatorがnestしたときの型付

理想的には、Navigatorと全く同じ構造の型を1つ定義しておいて、

それをglobalなNavigationに対して1箇所で型付してあげればよいはず

親に対しては

code:ts

type NavigateParams = {

screen?: string;

params?: NavigateParams;

initial?: boolean;

};

export type MainBottomTabParams = {

Timeline: NavigateParams;

Notification: NavigateParams;

Search: NavigateParams;

};

親からみて、どの子にもいけるようにこの型を使う

https://gyazo.com/efa4eb491a2d36a5e1b99b6fe3acdfc3

子に対してはCompositeNavigationPropを使う

子から見て、決まった親を見る場合にはこれを使う

https://gyazo.com/b2679eb82365e3480041d5fb0e88b064

CompositeNavigationProp

CompositeNavigationProp<自分, 親>

nestが重なると複雑になる

code:ts

export type FavoriteTopTabsType<

PageName extends keyof FavoriteTopTabsParams

= {

navigation: CompositeNavigationProp<

StackNavigationProp<FavoriteTopTabsParams, PageName>,

CompositeNavigationProp<

StackNavigationProp<FavotireStackParams, 'FavoriteTopTabs'>,

CompositeNavigationProp<

BottomTabNavigationProp<MainBottomTabParams, 'FavoriteStack'>,

BottomTabNavigationProp<MainStackParams, 'MainBottomTabNavigator'>

;

route: RouteProp<FavoriteTopTabsParams, PageName>;

};

こう書いていたが

code:before.ts

export type TimelineStackType<PageName extends keyof TimelineStackParams> = {

navigation: StackNavigationProp<TimelineStackParams>;

route: RouteProp<TimelineStackParams, PageName>;

};

これでいい

code:afret.ts

name of the current route

setParamsするときに必要になるっぽい

code:ts

type ProfileScreenNavigationProp = StackNavigationProp<

RootStackParamList,

'Profile'

;